<template>
  <div>
    <div style="display: flex">
      <div id="main1" style="width: 50%;height: 600px;padding-top: 20px;"></div>
      <div id="main2" style="width: 50%;height: 600px;padding-top: 20px;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts/extension/bmap/bmap';

export default {
  name: 'interviewEcharts',
  data() {
    return {
      interMoneyList: [],
      interTypeList: [],

    };
  },
  created() {
  },
  methods: {
    async myEcharts1() {
      let res = await this.$request(`/dqinterview/listByType`);
      this.interTypeList = res.data.data
      let data = [];
      for (let i = 0; i < this.interTypeList.length; i++) {
        data.push({value: this.interTypeList[i].value, name: this.interTypeList[i].name});
      }
      var chartDom = document.getElementById('main1');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '招聘岗位数量统计',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      option && myChart.setOption(option);
    },
    async myEcharts2() {
      let res = await this.$request(`/dqinterview/listByMoney`);
      this.interMoneyList = res.data.data
      var chartDom = document.getElementById('main2');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '招聘薪资统计',
          left: 'center',
          subtext: '（横坐标单位：元，纵坐标单位：个）',
        },
        xAxis: {
          type: 'category',
          data: [this.interMoneyList[0].name, this.interMoneyList[1].name, this.interMoneyList[2].name, this.interMoneyList[3].name]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [this.interMoneyList[0].value, this.interMoneyList[1].value, this.interMoneyList[2].value, this.interMoneyList[3].value],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };
      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.myEcharts1();
    this.myEcharts2();
  }
};
</script>

<style scoped>

</style>
